<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery.js"></script>
<style type="text/css">
.digits {
	text-align: right;
}
</style>
<script type="text/javascript">
	$(function() {
		$('#result').css({
			'width' : '700px',
		});
		$('#calculateBtn')
				.click(
						function() {
							if (validate()) {
								var totalLoanEl = $('#totalLoan');
								var tenureEl = $('#tenure');
								var interestEl = $('#interest');
								var loanType = $('#loanType option:selected')
										.val();
								var totalLoan = totalLoanEl.val();
								var tenure = tenureEl.val();
								var interest = interestEl.val();
								$
										.ajax({
											url : '${pageContext.request.contextPath }/loan',
											type : 'POST',
											async : false,
											cache : false,
											dataType : 'json',
											data : {
												totalLoan : totalLoan,
												tenure : tenure,
												interest : interest,
												loanType : loanType
											},
											success : function(data) {
												$('#result > tbody > tr')
														.remove();
												if (data) {
													var details = data.details;
													var summary = data.summary;
													for ( var i = 0; i < details.length; i++) {
														var detail = details[i];
														var principal = detail.principalStr;
														var interest = detail.interestStr;
														var installment = detail.installmentStr;
														var remaining = detail.remainingStr;
														var tr = $('<tr>');
														var tdMonth = $('<td>'
																+ (i + 1)
																+ '</td>');
														var tdPrincipal = $('<td class="digits">'
																+ principal
																+ '</td>');
														var tdInterest = $('<td class="digits">'
																+ interest
																+ '</td>');
														var tdInstallment = $('<td class="digits">'
																+ installment
																+ '</td>');
														var tdRemaining = $('<td class="digits">'
																+ remaining
																+ '</td>');
														tr.append(tdMonth);
														tr.append(tdPrincipal);
														tr.append(tdInterest);
														tr
																.append(tdInstallment);
														tr.append(tdRemaining);
														$(
																'#result > tbody:last')
																.append(tr);
													}
													var tr = $('<tr>');
													var tdTotal = $('<td>Total</td>');
													var tdPrincipal = $('<td class="digits">'
															+ summary.principalStr
															+ '</td>');
													var tdInterest = $('<td class="digits">'
															+ summary.interestStr
															+ '</td>');
													var tdInstallment = $('<td class="digits">'
															+ summary.installmentStr
															+ '</td>');
													tr.append(tdTotal);
													tr.append(tdPrincipal);
													tr.append(tdInterest);
													tr.append(tdInstallment);
													tr.append($('<td>'));
													$('#result > tbody:last')
															.append(tr);
												}
											}
										});
							}
						});
		$('#totalLoan').focus();
	});
	function validate() {
		var totalLoanEl = $('#totalLoan');
		var tenureEl = $('#tenure');
		var interestEl = $('#interest');
		var totalLoan = totalLoanEl.val();
		var tenure = tenureEl.val();
		var interest = interestEl.val();
		if (!$.isNumeric(totalLoan) || parseFloat(totalLoan) <= 0) {
			alert('Total loan should be numeric');
			totalLoanEl.focus();
			totalLoanEl.select();
			return false;
		} else if (!(/^[0-9]+$/.test(tenure)) || parseInt(tenure) <= 0) {
			alert('Tenure should be integer and greater than 0');
			tenureEl.focus();
			tenureEl.select();
			return false;
		} else if (!$.isNumeric(interest) || parseFloat(interest) <= 0) {
			alert('Interest should be numeric and greater than 0');
			interestEl.focus();
			interestEl.select();
			return false;
		}
		return true;
	}
</script>
</head>
<body>
	<table>
		<tr>
			<td>Total Loan</td>
			<td><input type="text" id="totalLoan" name="totalLoan" value="100000000" /></td>
		</tr>
		<tr>
			<td>Tenure</td>
			<td><input type="text" id="tenure" name="tenure" value="12" /></td>
		</tr>
		<tr>
			<td>Interest</td>
			<td><input type="text" id="interest" name="interest" value="12" />&nbsp;%</td>
		</tr>
		<tr>
			<td>Interest Type</td>
			<td><select id="loanType" name="loanType">
					<c:forEach var="loan" items="${loanTypes}">
						<option value="${loan }">${loan }</option>
					</c:forEach>
			</select></td>
		</tr>
		<tr>
			<td colspan="100%"><input type="button" value="Calculate" id="calculateBtn" /></td>
		</tr>
	</table>
	<br />
	<br />
	<table id="result" border="1">
		<thead>
			<tr>
				<th width="10">Month</th>
				<th width="30">Principal Loan</th>
				<th width="30">Interest</th>
				<th width="50">Installment</th>
				<th width="50">Remaining</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</body>
</html>